<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title>event handlers</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="../../polymer.html">
    <script src="../../../tools/test/htmltest.js"></script>
    <script src="../../../tools/test/chai/chai.js"></script>
  </head>
  <body>

  <x-test>
    <div>...light...</div>
  </x-test>

  <polymer-element name="x-test-host" on-tap="{{hostTapAction}}">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      x-test2
    </template>
    <script>
      Polymer('x-test-host', {
        hostTapAction: function(e) {
          e.tapped = 1;
          e.stopPropagation();
        }
      });
    </script>
  </polymer-element>

  <polymer-element name="x-test">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      <div>x-test</div>
      <x-test-host id="test" on-tap="{{testTapAction}}"></x-test-host>
    </template>
    <script>
      Polymer('x-test', {
        eventDelegates: {
          pointerdown: 'testPointerDownAction',
        },
        ready: function() {
          var e = this.fire('tap', {}, this.$.test);
          chai.assert.equal(e.tapped, 2, 'instance and host event listener can co-exist');
          var e2 = this.fire('pointerdown', {}, this);
          chai.assert.isTrue(e2.touched, 'eventDelegates works');
          done();
        },
        testTapAction: function(e) {
          e.tapped++;
        },
        testPointerDownAction: function(e) {
          e.touched = true;
        }
      });
    </script>  
  </polymer-element>
  </body>
</html>
